<template>
  <el-dialog
    title="修改区域"
    :close-on-click-modal="false"
    :visible.sync="classalert"
    v-loading.fullscreen.lock="vloading"
  >
    <el-form :model="form">
       <el-row>
        <el-col :span="11"
          ><el-form-item label="对应服务" :label-width="formLabelWidth">
            <el-select
              style="width: 100%"
              v-model="form.s_id"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in service"
                :key="index"
                :label="item.name"
                :value="item.s_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11"
          ><el-form-item label="图片分类" :label-width="formLabelWidth">
            <el-select
              style="width: 100%"
              v-model="form.classify"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in classify"
                :key="index"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="上传封面" :label-width="formLabelWidth">
            <input
              id="upload"
              type="file"
              name="img"
              style="display: none"
              @change="getimg"
            />
            <div class="el-upload el-upload--picture-card" @click="ck">
              <div>
                <i slot="default" class="el-icon-plus" />
              </div>
            </div>
            <div
              v-for="(src, x) in imgsrc"
              :key="x"
              class="el-upload--picture-card"
            >
              <span class="close" @click="close(x)">
                <i class="el-icon-delete" />
              </span>
              <el-image
                :src="src.showimg"
                fit="cover"
                style="width: 100%; height: 100%"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="classalert = false">取 消</el-button>
      <el-button type="primary" @click="ok">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import axios from "axios";
import { getallservice } from "@/api/service/service";
import { update } from "@/api/sub/banner.js";
export default {
  name:"serviceadd",
  data() {
    var $domain = process.env.VUE_APP_BASE_API;
    return {
      domain: $domain,
      classalert: false,
      vloading: false,
      form: {
        s_id: "",
        classify:""
      },
      formLabelWidth: "120px",
      service: [],
      imgsrc: [],
      classify:[
        {name:"首页",value:1},
        {name:"名医榜",value:2},
        {name:"未定义",value:3},
      ]
    };
  },
  created(){
      this.requestservice()
  },
  methods: {
    add(res) {
      let reg = new RegExp(this.domain, "g")
      var that = this;
      that.form = res;
      that.form.s_id = parseInt(that.form.s_id)
      that.imgsrc = [{
          uploadimg:res.img.replace(reg,""),
          showimg:res.img
      }]
      that.classalert = true;
    },
    ok() {
      this.vloading = true;
      this.requestadd();
    },
    requestadd() {
      let that = this,
      data = {
        field:"id",
        value:that.form.id,
        s_id: that.form.s_id,
        classify:that.form.classify,
        img:that.imgsrc[0].uploadimg
      };
      update(data).then(() => {
        that.$emit('then')
        that.classalert = false;
        that.vloading = false;
      });
    },
    ck() {
      if (this.imgsrc.length === 0) {
        document.getElementById("upload").click();
      } else {
        this.$message({
          type: "error",
          message: "封面只可以上传一张",
        });
      }
    },
    getimg(e) {
      var str = [],
        that = this,
        config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
      e.target.files.forEach((file) => {
        var obj = {
          showimg: window.URL.createObjectURL(file),
          uploadimg: "",
        };
        // str.push()
        const formData = new FormData();
        formData.append("uploadfile_ant", file);
        axios
          .post(that.domain + "index/index/upload", formData, config)
          .then(function (res) {
            obj.uploadimg = res.data;
            that.imgsrc.push(obj);
            that.$message({
              type: "success",
              message: "上传成功!",
            });
          })
          .catch(function (error) {
            console.log(error);
            that.$message({
              type: "info",
              message: "上传错误!",
            });
          });
      });
    },
    close(id) {
      this.imgsrc.splice(id, 1);
    },
    requestservice() {
      var that = this;
      var data = {
        field: "s_id",
        op: ">",
        value: 0,
        order_by: "cTime",
      };
      getallservice(data).then((res) => {
        that.service = res;
      });
    }
  }
};
</script>

<style>
  .el-form--inline .el-form-item__content {
    display: block;
  }
  .el-upload--picture-card {
  margin: 1%;
  position: relative;
  overflow: hidden;
  display: inline-block;
  }
  .close {
    opacity: 0;
    transition: opacity 0.3s;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
  }
  .el-upload--picture-card:hover .close {
    opacity: 1;
  }
  .close > i {
    margin: auto;
  }
  input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    }

    input[type="number"] {
    -moz-appearance: textfield;
    }
</style>